<template>
	<div id="userEcharts" v-bind:style="{ height: '400px' }"></div>
</template>

<script setup>//@ts-nocheck
import { onMounted, onUnmounted, inject } from "vue"
import api from '../../api/api'

// 声明定义一下echart
let echart = inject("echarts")
onMounted(() => {
	initChart()
})
onUnmounted(() => {
	echart.dispose
})
// 基础配置一下Echarts
function initChart() {
	let chart = echart.init(document.getElementById("userEcharts"))
	// 显示加载
	chart.showLoading()
	// 封装获取对应评论的方法
	async function toGetData() {
		return await api.get(`/admin/user`).then((res) => {
			let data = {
				stopTrue: 0,
				stopFalse: 0
			}
			res.data.rows.forEach(x => {
				x.userStop ? data.stopTrue++ : data.stopFalse++
			})
			return data
		})
	}
	toGetData().then((res) => {
		// 关闭加载
		chart.hideLoading()
		// 配置和数据
		let datas = [
			{ value: res.stopFalse, name: '正常用户'},
			{ value: res.stopTrue,  name: '违规用户'},
		]

		let datap = []
		let color = ['#2ecc71','#e74c3c']
		// 填充图标下半部分
		for (let i = 0; i < datas.length; i++) {
			datap.push({
				value: datas[i].value,
				name: 'rosetemp' + i,
			})
			color.push('#ecf0f1')
		}
		datap = datas.concat(datap)

		let options = {
			backgroundColor: '#ecf0f1',
			legend: {
				bottom: '0%',
				left: 'center',
				orient: 'vertical',
				data: datas,
				icon: 'circle',
				itemWith: 8,
				itemHeight: 8,
				itemGap: 10,
				// padding: [5, 10, 5, 0],
				formatter(name) {
					const item = datas.filter((item) => item.name === name)[0]
					// 使用富文本样式
					return `{name|${name}}{value| ${item.value}位}`
				},
				textStyle: {
					rich: {
						name: {
							color: '#595959',
							fontSize: 14,
							width: 150,
							fontWeight: 600
						},
						value: {
							color: '#595959',
							fontSize: 14,
							width: 170,
							fontWeight: 600
						},
					},
				},
			},
			title: {
				text: '所有用户状态',
				top: '10%',
				textAlign: 'center',
				left: '49.5%',
				textStyle: {
					color: '#262626',
					fontSize: 18,
					fontWeight: '600',
				}
			},
			color: color,
			series: [
				{
					type: 'pie',
					radius: [40, 200],
					center: ['50%', '73%'],
					roseType: 'radius',
					silent: true,
					startAngle: 180,
					legendHoverLink: false,
					itemStyle: {
						borderRadius: 0,
					},
					label: {
						show: false,
					},
					emphasis: {
						label: {
							show: false,
						},
						disabled : true
					},
					color: ['#f6f8fe', '#ecf0f1'],
					data: [
						{ value: 10, name: 'r' },
						{ value: 10, name: 'ro' },
					],
					select: {
						disabled : true
					},
				},
				{
					type: 'pie',
					radius: [40, 190],
					center: ['50%', '73%'],
					roseType: 'radius',
					startAngle: 180,
					// minShowLabelAngle : 180,
					legendHoverLink: false,
					itemStyle: {
						borderRadius: 0,
					},
					label: {
						show: true,
						position: 'inside',
						color: '#ecf0f1',
						formatter(params) {
							return params.name
						},
					},
					emphasis: {
						label: {
							show: true,
						},
						disabled : true
					},
					data: datap,
				},
			],
		}

		chart.setOption(options)
	})
	window.onresize = function () {
		//自适应大小
		chart.resize()
	}
}

</script>

<style lang="scss" scoped>

</style>